<template>
  <div v-if="show" class="doc-info-panel">
    <div class="doc-info-header">
      <h3>当前文档信息</h3>
      <button @click="$emit('update:show', false)" class="close-btn">×</button>
    </div>
    <div class="doc-info-content">
      <div class="info-item" v-for="(value, key) in displayInfo" :key="key">
        <strong>{{ key }}:</strong> 
        <div v-if="key.includes('内容')" class="content-preview" :class="{ 'full-content' :key === '文档内容' }">
          {{ value || '未获取到' }}
        </div>
        <span v-else>{{ value || '未获取到' }}</span>
      </div>
    </div>
    <div class="doc-info-actions">
      <button @click="refreshDocInfo" class="refresh-btn">刷新信息</button>
      <button @click="copyDocInfo" class="copy-btn">复制信息</button>
      <button @click="exportDocContent" class="export-btn">导出内容</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref, computed, watch } from 'vue'
import { getFullDocInfo } from '@/utils/docUtils'
import { exportMdContent } from '@/api'

interface DocInfo {
  id: string
  title: string
  path: string
  notebookId: string
  contentPreview: string
  fullContent: string
  markdown: string
  created: string
  updated: string
  type: string
  subtype: string
}

interface Props {
  show: boolean
}

interface Emits {
  (e: 'update:show', value: boolean): void
}

const props = defineProps<Props>()
defineEmits<Emits>()

// 组件内部管理文档信息
const docInfo = ref<DocInfo>({
  id: '', title: '', path: '', notebookId: '',
  contentPreview: '', fullContent: '', markdown: '',
  created: '', updated: '', type: '', subtype: ''
})

// 计算显示信息，减少模板重复
const displayInfo = computed(() => ({
  '文档ID': docInfo.value.id,
  '文档标题': docInfo.value.title,
  '文档路径': docInfo.value.path,
  '笔记本ID': docInfo.value.notebookId,
  '创建时间': docInfo.value.created,
  '更新时间': docInfo.value.updated,
  '文档内容': docInfo.value.fullContent
}))

// 监听显示状态变化，自动获取文档信息
watch(() => props.show, (newShow) => {
  if (newShow) {
    loadDocInfo()
  }
})

// 加载文档信息
async function loadDocInfo() {
  try {
    console.log('开始获取当前文档信息...')
    const result = await getFullDocInfo()
    
    // 更新文档信息
    docInfo.value = {
      id: result.docId || '',
      title: result.title || '',
      path: result.path || '',
      notebookId: result.notebookId || '',
      contentPreview: result.fullContent?.substring(0, 200) || '',
      fullContent: result.fullContent || '',
      markdown: result.fullContent || '',
      created: result.created || '',
      updated: result.updated || '',
      type: result.type || '',
      subtype: result.subtype || ''
    }
    
    console.log('文档信息获取完成')
  } catch (error) {
    console.error('获取文档信息失败:', error)
    alert('获取文档信息失败，请检查控制台错误信息')
  }
}

// 刷新文档信息
function refreshDocInfo() {
  loadDocInfo()
}

// 复制文档信息到剪贴板
async function copyDocInfo() {
  try {
    await navigator.clipboard.writeText(JSON.stringify(docInfo.value, null, 2))
    console.log('文档信息已复制到剪贴板')
    alert('文档信息已复制到剪贴板！')
  } catch (err) {
    console.error('复制失败:', err)
    alert('复制失败，请手动复制。')
  }
}

// 导出文档内容
async function exportDocContent() {
  if (!docInfo.value.id) {
    alert('文档ID不存在，无法导出内容。')
    return
  }

  try {
    const data = await exportMdContent(docInfo.value.id)
    
    if (data?.content) {
      const blob = new Blob([data.content], { type: 'text/markdown;charset=utf-8' })
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = `${docInfo.value.title || '文档'}.md`
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      URL.revokeObjectURL(url)
      
      console.log('文档内容已导出成功')
      alert('文档内容已导出成功！')
    } else {
      alert('导出文档内容失败：未获取到内容')
    }
  } catch (error) {
    console.error('导出文档内容时出错:', error)
    alert('导出文档内容失败，请检查控制台错误信息。')
  }
}
</script>

<style lang="scss" scoped>
.doc-info-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  max-width: 90vw;
  max-height: 80vh;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.doc-info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  
  h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }
  
  .close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    
    &:hover {
      background: #e9ecef;
      color: #333;
    }
  }
}

.doc-info-content {
  padding: 20px;
  max-height: 400px;
  overflow-y: auto;
  
  .info-item {
    margin-bottom: 16px;
    
    strong {
      display: inline-block;
      width: 100px;
      color: #495057;
      font-weight: 600;
    }
    
    .content-preview {
      margin-top: 8px;
      padding: 12px;
      background: #f8f9fa;
      border: 1px solid #e9ecef;
      border-radius: 4px;
      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
      font-size: 13px;
      line-height: 1.5;
      color: #495057;
      max-height: 120px;
      overflow-y: auto;
      white-space: pre-wrap;
      word-break: break-word;
      
      &.full-content {
        font-size: 14px;
        line-height: 1.8;
        color: #333;
        max-height: none;
      }
    }
  }
}

.doc-info-actions {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
  
  button {
    padding: 8px 16px;
    border: 1px solid #007bff;
    border-radius: 4px;
    background: white;
    color: #007bff;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    
    &:hover {
      background: #007bff;
      color: white;
    }
    
    &.refresh-btn {
      border-color: #28a745;
      color: #28a745;
      &:hover { background: #28a745; color: white; }
    }
    
    &.copy-btn {
      border-color: #6c757d;
      color: #6c757d;
      &:hover { background: #6c757d; color: white; }
    }

    &.export-btn {
      border-color: #007bff;
      color: #007bff;
      &:hover { background: #007bff; color: white; }
    }
  }
}

@media (max-width: 768px) {
  .doc-info-panel {
    width: 95vw;
    max-height: 90vh;
  }
  
  .doc-info-content .info-item strong {
    width: 80px;
    font-size: 14px;
  }
  
  .doc-info-actions {
    flex-direction: column;
    button { width: 100%; }
  }
}
</style>
